<template>
    <div class="ListMain" v-loading="loading">
        <meow-blog :ArticleList="ArticleList" @JumpDetails="JumpDetails"></meow-blog>
        
        <div class="btnLoading" @click="LoadMoredata">{{loading?"加载中。。。":"加载更多"}}</div>
    </div>
</template>
<script>
import meowBlog from "@/components/meowBlog"
import {getAllArticle} from 'api/article'
import { mapState, mapMutations } from 'Vuex';

export default {
    components:{
        meowBlog
    },
    computed:{
        classmj(){
            return this.$store.state.classinfo.classmj;
        }
        
    },
    watch:{
        classmj:function(val){
            console.log(val);
            this.pageNo=1;
            this.ArticleList=[]
            this._getAllArticle()
        }
    },
    data(){
        return {
            
            loading:false,
            ArticleList:[],
            pageNo:1,
            pageSize:3
        }
    },
    
    methods:{
        ...mapMutations([ 'saveUserInfo' ] ),
        _getAllArticle(){
            let data = {
                pageNo:this.pageNo,
                pageSize:this.pageSize,
                classId: this.classmj||""
            }
            getAllArticle(data).then(res=>{
                if(res.code==0){
                    this.loading=false;
                    if(res.data.length<=0){

                        this.$message({
                            message: '没有更多的数据了',
                            type: 'warning'
                        });
                        return
                    }
                    res.data.forEach(item => {
                        item.pushTime = this.tool.getFormatDate(item.pushTime);
                    })
                    this.ArticleList.push.apply(this.ArticleList, res.data);
                    
                }else{
                    this.loading=false;
                    this.$message(res.msg);
                }
            })
        },
        JumpDetails(link){
            this.$router.push({name:"文章详情", query:{wId:link.wId}})
        },
        LoadMoredata(){
            this.pageNo+=1;
            this.loading=true;
            this._getAllArticle();
        }

    },
    mounted(){
        this._getAllArticle();
    },
    
}
</script>
<style lang="scss" scoped>
.btnLoading{
    display: block !important;
    cursor: pointer;
    width: 4rem;
    line-height: 2;
    padding: 3px 0;
    border:1px solid #fb4107;
    margin: 0 auto;
    text-align: center;
    background: rgba($color: #fb4107, $alpha: 0.5);
    color: #fff;
    // font-weight: bold;
    font-size: 0.35rem;
    
}
</style>

